<template>
  <view>
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
    <view class="form">
      <view class="input u-flex">
        <view class="h2">头像</view>
        <view class="info">
		  <!-- #ifdef MP-WEIXIN -->
          <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
            <image class="avatar" :src="userHeader"></image>
          </button>
		  <!-- #endif -->
		  <!-- #ifdef H5 | APP-PLUS-->
		  <div style="text-align: right;">
				 <img class="avatar" :src="userHeader ? userHeader : 'https://pic.gxmore.com/FsmAf8N63Td801Lxcmw6DIErvd9i'" style="width:70rpx;height:70rpx;border-radius: 10rpx;border: 1px solid #ebedf0;" @click="chooseimg"></img>
		  </div> 
		  <!-- #endif -->
        </view>
        <u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
      </view>
      <!-- <view class="input u-flex">
        <view class="h2">昵称</view>
        <view class="info">
          <u--input type="nickname" input-align="right" v-model="userName" placeholder="请输入昵称" border="none" />
        </view>
      </view> -->

      <!--<view class="input u-flex">
        <view class="h2">手机号</view>
        <view class="info">
			<div style="text-align: right;">{{mobile}}</div>
          <u--input  input-align="right" v-model="mobile" placeholder="请填写手机号" border="none" /> 
        </view>
      </view>-->
	  
      <view class="input u-flex">
        <view class="h2">姓名</view>
        <view class="info">
          <u--input input-align="right" v-model="realName" placeholder="请填写姓名" border="none"  />
        </view>
      </view>
	  <!-- #ifdef H5 | APP-PLUS -->
	  <view class="input u-flex" style="justify-content: space-between;">
	    <view class="h2">账户管理</view>
	    <view class="info" style="width:80px;flex:none">
			<u-button text="退出账户" size="small" type="primary" @click="logout"></u-button>  
	    </view>
	  </view>
	 <!-- #endif -->
    </view>
    <view class="my-button">
      <u-button type="primary" shape="circle" @click="editMyPersonalInfo" text="确定"></u-button>
    </view>
    <ksp-cropper mode="fixed" :width="160" :height="160" :maxWidth="1024" :maxHeight="1024" :url="url1"
      @cancel="url1 = ''" @ok="onok"></ksp-cropper>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "vuex"
  import store from '@/store'
  import {
    editPersonalInfo
  } from '@/config/api2.js'
  import {
    getUserInfo
  } from '@/config/api.js'
  import {
    imgCheck
  } from '@/plugins/upload/upload.js'
  import log from "../../plugins/log"
  export default {
    data() {
      return {
        show: false,
        type: '',
        btnLoading: false,
        userName: '',
        realName: '',
        mobile: '',
        userHeader: '',
        url1: '',
        token: '',
		 fileList1: [],
      }
    },
    onLoad() {
      getUserInfo().then(res => {
        this.userHeader = res.userInfo.userHeader ? res.userInfo.userHeader : ''
        this.userName = res.userInfo.userName ? res.userInfo.userName : ''
        this.realName = res.userInfo.realName ? res.userInfo.realName : ''
        this.mobile = res.userInfo.mobile ? res.userInfo.mobile : ''
        this.token = res.userInfo.token ? res.userInfo.token : ''
      })
    },
    computed: {
      ...mapState([
        'userInfo'
      ])
    },
    methods: {
      ...mapMutations(['setShowWxLogin', 'setUserInfo','emptyUserInfo']),
	  logout(){
		  this.emptyUserInfo()
		  uni.showToast({
		    title: '您已退出账户',
		  });
		  setTimeout(()=>{
			 uni.switchTab({
			 	url: "/pages/index/index"
			  })
		  },500)
		  
	  },
      onClose() {
        this.setShowWxLogin(false);
      },
      onChooseavatar(e) {
        if (e.detail) {
			console.log(e)
          this.url1 = e.detail.avatarUrl
        }
      },
	  chooseimg(e){
		  uni.chooseImage({
			  count: 1,
			  success: (res) => {
				  // 设置url的值，显示控件
				  this.url1 = res.tempFilePaths[0];
			  }
		  });
	  },
      showPop(key) {
        this.show = true;
        this.type = key
      },
      // 头像裁剪完成
      onok(e) {
        imgCheck(e.path).then(async (res) => {
          if (res != '') {
            // 获取上传成功后的图片地址
            this.avatarUrl = res
            this.userHeader = res
          }
        })
        this.url1 = '' // 清空 url 关闭裁剪页面

      },
      editMyPersonalInfo() {
        editPersonalInfo({
          userName: this.userName,
          realName: this.realName,
          mobile: this.mobile,
          userHeader: this.userHeader
        }).then(res => {
          uni.showToast({
            title: '提交成功！',
            icon: 'success'
          });
          store.dispatch('userInfo')
		   uni.navigateBack()
        })
      }
    },

  }
</script>

<style lang="scss">
  @import '@/style/wmj.scss'
</style>